<template>
  <el-menu
    :default-active="activeMenu"
    class="el-menu-vertical"
    :router="true"
    :collapse="opened"
    background-color="#f0f0f0"
    text-color="#000000"
    active-text-color="#415fff">
    <template v-for="(item, index) in routes" :key="index + ''">
      <el-submenu :index="item.path" v-if="!item.hidden && item.children && item.children.length">
        <template #title>
          <i :class="item.meta.icon"/>
          <span>{{item.meta.title}}</span>
        </template>
        <el-menu-item v-for="(c, y) in item.children" :index="item.path + '/' + c.path" :key="index + '-' + y">
          <i :class="c.meta.icon"/>
          <template #title>{{c.meta.title}}</template>
        </el-menu-item>
      </el-submenu>
      <el-menu-item :index="item.path" v-else-if="!item.hidden">
        <i :class="item.meta.icon"/>
        <template #title>{{item.meta.title}}</template>
      </el-menu-item>
    </template>
  </el-menu>
</template>
<script>
import {getRoutes} from "../util/authorityUtils";
import store from "../store";

export default {
  name: "Aside",
  computed: {
    opened() {
      return !store.getters.getAsideStatus
    },
    activeMenu() {
      const route = this.$route
      const { meta, path } = route
      // if set path, the sidebar will highlight the path you set
      if (meta.activeMenu) {
        return meta.activeMenu
      }
      if (path === "/index") {
        return "/";
      }
      return path
    }
  },
  setup() {
    const routes = getRoutes();
    return {
      routes
    }
  }
}
</script>
<style scoped lang="scss">
.el-menu-vertical {
  border: 0;
}
.el-menu-vertical:not(.el-menu--collapse) {
  width: 210px;
  min-height: 400px;
}
</style>
